<template>
  <div class="chart">
    <div class="chat-nav">
      <chat-nav @setActiveTab="setActiveTab"></chat-nav>
    </div>
    <div class="chat-siderBar">
      <chat-search></chat-search>
      <template v-if="activeTabName === 'message'">
        <chat-room></chat-room>
      </template>
      <template v-else>
        <chat-contact></chat-contact>
      </template>
    </div>
    <div class="content">
      <chat-message></chat-message>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import ChatNav from "./chat-nav/index.vue";
import ChatSearch from "./chat-search/index.vue";
import ChatRoom from "./chat-room/index.vue";
import ChatContact from "./chat-contact/index.vue";
import ChatMessage from "./chat-message/index.vue";

export default defineComponent({
  name: "wechat",
  components: { ChatNav, ChatRoom, ChatSearch, ChatMessage, ChatContact },
  setup() {
    const activeTabName = ref("message");
    const setActiveTab = (active) => {
      activeTabName.value = active;
    };
    return { activeTabName, setActiveTab };
  },
});
</script>
<style lang="less" scoped>
@import "src/pages/wechat/wechat.less";
.chart {
  height: 100%;
  box-shadow: 10px 20px 80px rgb(0 0 0 / 80%);
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  .chat-nav {
    width: 74px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  }
  .chat-siderBar {
    width: 260px;
    height: 100%;
    border-right: 1px solid #d6d6d6;
    background: #fbfbfb;
  }
  .content {
    flex: 1;
    height: 100%;
    background: #fbfbfb;
    overflow-y: hidden;
    position: relative;
  }
}
</style>
